<template>
  <div class="location">
    <Head :title="title"></Head>
    <div class="searchbox">
      <form action="/">
        <van-search
          v-model.trin="iptVal"
          shape="round"
          placeholder="请输入搜索关键词"
          class="searchbox"
        />
      </form>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="goHome(item)">
        {{ item.name }}
      </li>
    </ul>
    <div class="current">当前位置:</div>
    <div id="container">
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import Head from '@/components/title.vue'
import AMap from 'AMap'
const router = useRouter()
const store = useStore()
const title = ref('城市定位')
const city = ref('')
const iptVal = ref('')
const list = ref([])
const getCityInfo = store.state.cityInfo
console.log('getCityInfo', getCityInfo)
onMounted(() => {
  // 搜索之后地图改变
  if (getCityInfo.name) {
    const map = new AMap.Map('container', {
      zoom: 14, // 级别
      center: [getCityInfo.location.lng, getCityInfo.location.lat] // 中心点坐标
    })
    const marker = new AMap.Marker({
      position: [getCityInfo.location.lng, getCityInfo.location.lat] // 位置
    })
    marker.setLabel({
    // offeset:new AMap.Pixel(0,0),
      content: getCityInfo.name,
      direction: 'top-center'
    })
    map.add(marker)
  } else {
    // 显示地图的容器挂载
    const map = new AMap.Map('container', {
      zoom: 11, // 级别
      center: [113.598609, 34.747034] // 中心点坐标
    })
    AMap.plugin('AMap.CitySearch', function () {
      const citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          console.log(result)
          city.value = result.city
        }
      })
    })
    const marker = new AMap.Marker({
      position: [113.598609, 34.747034] // 位置
    })
    marker.setLabel({
    // offeset:new AMap.Pixel(0,0),
      content: '不凡学院',
      direction: 'top-center'
    })
    map.add(marker)
  }
})

// 监听输入框里的值发生变化
watch(iptVal, (nval, oval) => {
  AMap.plugin('AMap.AutoComplete', function () {
    const autoOptions = {
      // city 限定城市，默认全国
      city: city.value
    }
    // 实例化AutoComplete
    const autoComplete = new AMap.AutoComplete(autoOptions)
    // 根据关键字进行搜索
    autoComplete.search(iptVal.value, function (status, result) {
      // 搜索成功时，result即是对应的匹配数据
      console.log(result)
      // 获取结果展示
      list.value = result.tips
    })
  })
})
// 点击搜索之后的地址回到首页
const goHome = (val) => {
  console.log(val)
  // 将获取的值存入vuex里
  store.commit('uptCityInfo', val)
  router.push('/home')
}
</script>

<script>
export default {
  name: 'locationView'
}
</script>
<style lang="scss" scoped>
.location {
  position: relative;
  background-color: #ede9e9;
  .title {
    text-align: center;
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    height: 79px;
    line-height: 79px;
    background-color: #fff;
  }
  .searchbox {
    width: 100%;
    height: 142px;
    background-color: #fff;
  }
  #container {
    width: 710px;
    height: 342px;
    // margin: 0 auto;
    position: fixed;
    bottom: 58px;
    left: 21px;
  }
  .current {
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    position: fixed;
    bottom: 424px;
    left: 21px;
  }
}
</style>
